﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>无缝滚动原理</title>
<style>
*{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"}
#div1{width:100px;height:110px; background:#ccc; margin:0 auto; position:relative; overflow: hidden;}
#div1 ul{ position:absolute;left:0;top:0;}
#div1 ul li{ float:left;width:100px;height:100px;background:red; font-size:30px; line-height:100px; text-align:center;}
</style>
<script>
window.onload=function(){
	var oDiv=document.getElementById('div1');
	var oUl=oDiv.children[0];
	var aLi=oUl.children;
	
	
	//1.设定ul.w
	//oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
	oUl.innerHTML+=oUl.innerHTML;
	oUl.style.width=aLi[0].offsetWidth*oUl.children.length+'px';
	
	//2.ul动起来 ←
	setInterval(function(){
		var l=oUl.offsetLeft-10;//计算
		//限定		ul.left<=	- ul.w/2	ul.left=0
				//ul.left>=	0		ul.left=	-ul.w/2	
		if(l<= -oUl.offsetWidth/2){
				//alert('到极限了');
				l=0;	
		}
		/*if(l>=0){
			//alert('到极限了');
			l= -oUl.offsetWidth/2;
		}*/
		
		oUl.style.left=l+'px';	//使用
		
	},60);
};
</script>
</head>

<body>

<div id="div1">
	<ul>
    	<li>0</li>
    	<li>1</li>
    	<li>2</li>
    	<li>3</li>
    </ul>
</div>

</body>
</html>
